<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>劳动教育主题网站</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E63946', // 柔和红色
                        secondary: '#1D3557', // 深蓝色
                        light: '#F1FAEE', // 浅色背景
                        accent: '#A8DADC', // 浅蓝色
                        neutral: '#457B9D', // 中性色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .nav-link {
                @apply block py-2 px-4 rounded-md transition-all duration-300 hover:bg-primary/10 hover:text-primary;
            }
            .nav-link.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .section-card {
                @apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl;
            }
            .social-icon-group:hover .wechat-qrcode,
            .social-icon-group:hover .weibo-qrcode,
            .wechat-qrcode:hover,
            .weibo-qrcode:hover {
                @apply opacity-100 visible pointer-events-auto;
            }
        }
    </style>
</head>

<body class="bg-light min-h-screen flex flex-col">
    <!-- 头部区域 -->
    <header class="h-[8rem] bg-gradient-to-r from-primary/90 to-secondary/90 text-white shadow-md">
        <div class="container mx-auto px-4 h-full flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <img src="../主页/img/image.png" alt="" class="w-[33vw] mx-4 object-contain">
                <h1 class="text-2xl md:text-3xl font-bold tracking-tight">劳动教育<span class="text-accent">实践平台</span></h1>
            </div>
            <nav class="hidden md:flex space-x-8 items-center">
                <!-- 添加text-lg md:text-xl类调整字体大小 -->
                <a href="../主页/layout.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">首页</a>
                <a href="../活动报道/近期活动.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">活动报道</a>
                <a href="../专业劳动案例/优秀案例.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">专业劳动案例</a>
                <a href="../学生心得/学生心得.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">学生心得</a>
            </nav>

            <button class="md:hidden text-white text-2xl">
                <i class="fa-solid fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <article class="flex-grow flex flex-col md:flex-row container mx-auto px-4 py-6 gap-6">
        <!-- 左侧导航栏 -->
        <aside class="w-full md:w-auto bg-white rounded-xl shadow-md p-4 shrink-0">
            <ul class="space-y-1 min-w-[180px]">
                <li><a href="./近期活动.html" class="nav-link  flex items-center"><i
                            class="fa-solid fa-book mr-2"></i>近期活动</a></li>
                <li><a href="./风采展示.html" class="nav-link active flex items-center"><i
                            class="fa-solid fa-calendar mr-2"></i>风采展示</a></li>
                <!-- <li><a href="#" class="nav-link flex items-center"><i class="fa-solid fa-calendar mr-2"></i>实践活动</a></li>
                <li><a href="#" class="nav-link flex items-center"><i class="fa-solid fa-trophy mr-2"></i>学生作品</a></li>
                <li><a href="#" class="nav-link flex items-center"><i class="fa-solid fa-question-circle mr-2"></i>常见问题</a></li>
                <li><a href="#" class="nav-link flex items-center"><i class="fa-solid fa-envelope mr-2"></i>联系我们</a></li> -->
            </ul>
        </aside>

        <!-- 中间内容区 -->
        <section class="flex-grow space-y-6">
            <!-- 电视机轮播图 -->
            <div class="tv-shell h-[80vh]">
                <div class="slider-container h-full relative"> <!-- 修改为与主页相同的slider-container -->
                    <div class="slider-item absolute inset-0 opacity-100 transition-opacity duration-1000 cursor-pointer">
                        <img src="../活动报道/img/劳动1.png" alt="成果展示" class="w-full h-full object-cover">
                    </div>
                    <div class="slider-item absolute inset-0 opacity-0 transition-opacity duration-1000 cursor-pointer">
                        <img src="../活动报道/img/劳动2.png" alt="成果展示" class="w-full h-full object-cover">
                    </div>
                    
                    <!-- 添加导航按钮 -->
                    <button class="slider-prev absolute left-4 top-1/2 -translate-y-1/2 z-30 bg-white/30 hover:bg-white/50 text-white p-2 rounded-full transition-colors">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <button class="slider-next absolute right-4 top-1/2 -translate-y-1/2 z-30 bg-white/30 hover:bg-white/50 text-white p-2 rounded-full transition-colors">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                    
                    <!-- 添加指示器 -->
                    <div class="slider-indicators absolute bottom-4 left-1/2 -translate-x-1/2 z-30 flex space-x-2">
                        <button class="slider-dot w-3 h-3 rounded-full bg-white opacity-100"></button>
                        <button class="slider-dot w-3 h-3 rounded-full bg-white opacity-50"></button>
                    </div>
                </div>
            </div>
        </section>

    </article>

    <!-- 页脚区域 -->
    <footer class="bg-gradient-to-r from-primary/90 to-secondary/90 pt-6 mt-auto"> <!-- 修改为pt-6并添加mt-auto -->
        <div class="container mx-auto px-4" style="display: flex; justify-content: center;">
            <div class="flex flex-col items-center space-y-4 pb-4"> <!-- 修改为items-center -->
                <!-- 社交链接 -->
                <div class="flex space-x-8 justify-start">
                    <div class="social-icon-group relative">
                        <a href="#"
                            class="text-white hover:text-accent transition-colors duration-300 flex flex-col items-center">
                            <i class="fa-brands fa-weixin text-2xl"></i>
                            <span class="text-sm mt-1">微信公众号</span>
                        </a>
                        <div
                            class="wechat-qrcode absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white p-3 rounded-lg shadow-xl opacity-0 invisible transition-all duration-300 pointer-events-none w-32 z-50">
                            <img src="../主页/img/wechat.png" alt="微信公众号" class="w-full h-auto object-cover">
                            <div class="text-sm text-center text-gray-700 mt-2">扫码关注公众号</div>
                        </div>
                    </div>

                    <div class="social-icon-group relative">
                        <a href="#"
                            class="text-white hover:text-accent transition-colors duration-300 flex flex-col items-center">
                            <i class="fa-brands fa-weibo text-2xl"></i>
                            <span class="text-sm mt-1">官方微博</span>
                        </a>
                        <div
                            class="weibo-qrcode absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white p-3 rounded-lg shadow-xl opacity-0 invisible transition-all duration-300 pointer-events-none w-32 z-50">
                            <img src="../主页/img/weibo.png" alt="官方微博" class="w-full h-auto object-cover">
                            <div class="text-sm text-center text-gray-700 mt-2">关注官方微博</div>
                        </div>
                    </div>
                </div>

                <!-- 版权信息 -->
                <div class="flex justify-center gap-8 pb-2"> <!-- 修改为justify-center -->
                    <div class="text-sm text-white">
                        &copy; 2025 劳动教育实践平台 - 版权所有
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function () {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('bg-primary/95', 'shadow-lg');
                header.classList.remove('bg-gradient-to-r', 'from-primary/90', 'to-secondary/90');
            } else {
                header.classList.remove('bg-primary/95', 'shadow-lg');
                header.classList.add('bg-gradient-to-r', 'from-primary/90', 'to-secondary/90');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 添加与主页相同的轮播图逻辑
        const sliderItems = document.querySelectorAll('.slider-item');
        const prevButton = document.querySelector('.slider-prev');
        const nextButton = document.querySelector('.slider-next');
        const dots = document.querySelectorAll('.slider-dot');
        let currentIndex = 0;

        function updateSlider() {
            sliderItems.forEach((item, index) => {
                item.style.opacity = index === currentIndex ? '1' : '0';
            });
            dots.forEach((dot, index) => {
                dot.classList.toggle('opacity-50', index !== currentIndex);
            });
        }

        prevButton.addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + sliderItems.length) % sliderItems.length;
            updateSlider();
        });

        nextButton.addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % sliderItems.length;
            updateSlider();
        });

        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentIndex = index;
                updateSlider();
            });
        });

        // 自动播放（可选）
        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderItems.length;
            updateSlider();
        }, 5000);
    </script>
</body>
</html>
<style type="text/tailwindcss">
    @layer components {
        /* 电视机外壳样式 */
        .tv-shell {
            @apply w-[66.67vw] h-[55vh]  /* 宽为视口2/3，高为视口4/9 */
                   border-4 border-[#262626] rounded-2xl  /* 深灰色边框+圆角 */
                   bg-[#1a1a1a] p-3  /* 外壳背景色+内边距 */
                   shadow-2xl mx-auto;  /* 阴影+居中 */
        }

        /* 轮播图可视区域（电视屏幕部分） */
        .carousel-container {
            @apply w-full h-full overflow-hidden  /* 隐藏溢出内容 */
                   bg-black rounded-lg;  /* 屏幕黑色背景+圆角 */
        }

        /* 轮播图滑动区域 */
        .carousel-slides {
            @apply flex w-full h-full transition-transform duration-1000 ease-in-out;
            animation: carousel 8s infinite;  /* 8秒循环动画 */
        }

        /* 单张轮播图片 */
        .carousel-slide {
            @apply min-w-full h-full object-cover;  /* 图片填满区域 */
        }

        /* 轮播动画（2张图示例，可根据实际图片数量调整百分比） */
        @keyframes carousel {
            0%, 40% { transform: translateX(0); }       /* 显示第1张 */
            50%, 90% { transform: translateX(-100%); }  /* 显示第2张 */
            100% { transform: translateX(0); }          /* 回到第1张 */
        }
    }
</style>
